<template>
  <div class="container">
    <div class="text-center upload-box">
      <div>
        <el-upload 
          ref="rebateUpload"
          class="upload-demo"
          drag
          :action="upload"
          name="excel"
          :limit="1"
          :before-upload="beforeUpload"
          :headers="headerUpload"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :show-file-list="false"
          :on-error="handleError"
          v-show="isShowUpload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('page.drop')}}，<em>{{$t('page.click')}}</em></div>
        </el-upload>
        <!-- <div 
          class="reset-back"
          v-if="isShowStepOne">
          <span 
            class="link"
            @click="handleRemove"
              >{{$t('page.emptyData')}}
          </span>
        </div> -->
        <div class="upload-name-box">
          <div class="upload-name"
            v-show="isShowUploadtxt">
            {{uploadFile.name}}
            <el-button type='text'
              @click="handleRemove()">x</el-button>
          </div>
          <el-progress 
            :percentage="percentage"
            :color="customColor"
            v-show="isShowPer">
          </el-progress>
        </div>
      </div>
    </div>

    <div class="container-body"
         v-if="isShowStepOne">
      <template>
        <histogramVue 
          title="终点1"
          id="histogram1"
          @shotImg="shotImg(0, $event)"
          :data="resultData['终点1']"
        />
        <histogramVue 
          title="终点2"
          id="histogram2"
          @shotImg="shotImg(1, $event)"
          :data="resultData['终点2']"
        />
        <histogramVue 
          title="起点"
          id="histogram3"
          @shotImg="shotImg(2, $event)"
          :data="resultData['起点']"
        />

        <!-- 下载计算结果表 -->
        <div class="title-space">
          <span>{{$t('page.calResultes')}}：</span>
          <el-button 
            type="text"
            @click="downloadExl()"
            size="mini"
            >
              {{$t('page.export')}}
          </el-button>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import waveChart from '@/components/WaveChart'
import { fetchUploadExl, fetchSandwich } from '@/api/table'
import { setStore, getStore } from '@/utils/common'
import { getToken } from '@/utils/auth'
import histogramVue from '../components/histogram.vue'
export default {
  data() {
    return {
      isShowStepOne: false, //是否显示第一步表格
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      isShowPer: false,
      percentage: 0,
      customColor: '#e6a23c',
      isRepeatSubmit: false,
      baseStepOne: [],
      lang: getStore('spr-lang') || 'zh', // 语言类型
      resultData: {
        histogram: {}, // 柱状图数据
      }
    }
  },
  components: {
    waveChart,
    histogramVue
  },
  methods: {
    beforeUpload(file) {
      this.uploadFile = file
      this.isShowPer = true
      this.isShowUpload = false
      this.isShowUploadtxt = true
      this.percentage += 60 + Math.floor(Math.random() * 10)
    },
    handleSuccess(file, filelist) {
      // file = {
      const next = 100 - this.percentage
      this.percentage += next
      this.isShowPer = false
      if (file.status === 200) {
        setStore('auuid', file.data.uuid)
        this.isShowStepOne = true
        this.resultData = file.data
      } else {
        this.$message.error(file.msg)
      }
    },
    handleError(err) {
      this.$message.error(err.msg)
    },
    handleRemove() {
      this.$refs['rebateUpload'].clearFiles() //清除文件
      //上传框
      this.isShowUpload = true
      this.isShowUploadtxt = false
      //可以计算
      //上传进度条
      this.percentage = 0
      //显示进度
      this.isShowPer = false
      this.isShowStepOne = false
      this.baseStepOne = []
      this.resultData = {
        histogram: {}, // 柱状图数据
      }
    },

    // 下载结果
    downloadExl() {
      let lang = this.lang === 'zh' ? 'CN' : 'ENG'
      const href = `${process.env.BASE_URL}receive/download/excel/14/${lang}/${getStore('auuid')}`
      window.open(href, '_blank')
    },

    // 上传结果图片
    async shotImg(i, data) {
      this.baseStepOne[i] = data
      console.log(i, this.baseStepOne.length);
      if(this.baseStepOne.length === 3) {
        try {
          await fetchSandwich({
            uuid: getStore('auuid') || '',
            imgBase64: this.baseStepOne
          })
        } catch(err) {
          return err
        }
      }
    },
  },
  computed: {
    upload: () => {
      return `${process.env.BASE_URL}sandwich/upload`
    },
    headerUpload: () => {
      const data = {}
      data.TOKEN = getToken()
      if (localStorage.getItem('spr-lang') === 'en') {
        data.LANG = 'ENG' // 传语言
      }
      return data
    },
  },
}
</script>

<style lang="scss" scoped>
.reset-back {
  display: flex;
  align-items: center;
  margin: 0 20px 20px;
  .link {
    cursor: pointer;
    color: #409eff;
    font-style: normal;
    margin-right: 20px;
  }
}

</style>